<template>
  <div class="error-view-container">
    <div class="error-box">
      <p class="error-title">错误信息：</p>
      <div>{{errorInfo.url}}</div>
      <div>{{errorInfo.error}}</div>
    </div>
    <div class="error-box">
      <p class="error-title common-btn-text" @click="showRequestInfo = !showRequestInfo">原始请求信息 <i :class="showRequestInfo ? 'icon-ali-shangyi' : 'icon-ali-xiayi'"></i></p>
      <div v-show="showRequestInfo">
          <div v-if="errorInfo.body">{{errorInfo.body}}</div>
          <div v-else>无</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        errorInfo: {
          url: '',    //请求地址
          error: '',    //错误信息
          body: ''    //原始请求信息
        },
        showRequestInfo: false, //是否展示
      }
    },
    created() {
      this.errorInfo = sessionStorage.getItem('errorInfo') ? JSON.parse(sessionStorage.getItem('errorInfo')) : {};
    },
    methods: {

    },
  }

</script>
<style scoped>
  .error-view-container {
    padding: 16px;
    height: 100%;
    overflow: auto;
  }
  .error-box {
    margin-bottom: 16px;
  }
  .error-title {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 8px;
  }
  .common-btn-text i {
    display: inline-block;
    color: var(--color-blue-main);
  }
  .common-btn-text:hover i {
    color: #4471EB;
  }
</style>